import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { useMount } from 'ahooks'
import styles from './index.less'
import { IAdmin } from '@/service/login';
import { connect } from 'umi'
const LoginForm = (props) => {
  console.log(props)
  const [ height, setHeight ] = useState('')
  // useEffect(() => {
  // }, [])
  useMount(() => {
    // 获取页面可视区域的高度
    const h: number = document.documentElement.offsetHeight
    console.log(h)
    // 给盒子赋值
     // ******************login_container___1Gzdr 通过审查元素得知***************************
    const box: any = document.querySelector('.login_container___1Gzdr')
    box.style.height = h + 'px'
  })
  const onFinish = (values: IAdmin) => {
    console.log('Received values of form: ', values);
    // 触发dva数据流的effects ---- 组件一定要用connect高阶组件包裹
    console.log(props)
    props.dispatch({
      // 触发的是 login模块下的login的effects函数
      type: 'login/login',
      payload: values
    })
  };

  return (
    <div className = { styles.login_container }>
      <div className = { styles.login_box }>
      <Form
        name="normal_login"
        className={ styles.login_form }
        onFinish={onFinish}
        initialValues = { {
          adminname: 'admin',
          password: '123456'
        } }
      >
        <Form.Item
          name="adminname"
          rules = {
            [
              {
                required: true,
                pattern: /^[a-zA-Z0-9_-]{4,16}$/,
                message: '请输入4-16位有效字符，包含字母，数字，下划线以及减号'
              }
            ]
          }
        >
          <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账户" />
        </Form.Item>
        <Form.Item
          name="password"
          rules = {
            [
              {
                required: true,
                // pattern: /^[a-zA-Z0-9_-]{4,16}$/,
                len: 6,
                message: '请输入6位字符的密码'
              }
            ]
          }
        >
          <Input
            size="large"
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="管理员密码"
          />
        </Form.Item>

        <Form.Item>
          <Button block size="large" type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
        </Form.Item>
      </Form>
      </div>
    </div>
  );
};
// console.log(connect)
export default connect()(LoginForm)
